<template>
  <div class="wrap">
    <el-menu
      router
      default-active="/home"
      class="el-menu-vertical-demo"
      background-color="#262a30"
      text-color="#a7b1c2"
      active-text-color="#ffffff"
    >
      <el-menu-item index="/home">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>

      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-s-order"></i>
          <span>职业规划</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/career/publish" v-if="display">
            <i class="el-icon-edit"></i>写职业规划
          </el-menu-item>
          <el-menu-item index="/career/manage">
            <i class="el-icon-s-management"></i>职业规划管理
          </el-menu-item>
          <el-menu-item index="/career/comments">
            <i class="el-icon-s-comment"></i>职业规划点评
          </el-menu-item>
          <el-menu-item index="/career/drafts" v-if="display">
            <i class="el-icon-edit-outline"></i>草稿箱
          </el-menu-item>
          <el-menu-item index="/career/deleted" v-if="display">
            <i class="el-icon-delete"></i>回收站
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-folder-add"></i>
          <span>简历指导</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/ResumeGuidance/myresume" v-if="display">
            <i class="el-icon-tickets"></i>上传简历
          </el-menu-item>
          <el-menu-item index="/ResumeGuidance/manage">
            <i class="el-icon-folder-opened"></i>简历管理
          </el-menu-item>
          <el-menu-item index="/ResumeGuidance/comments">
            <i class="el-icon-chat-line-round"></i>简历点评
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-discount"></i>
          <span>求职指导</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/JobGuidance/applyJob">
            <i class="el-icon-date"></i>求职管理
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="5" v-if="!display">
        <template slot="title">
          <i class="el-icon-wallet"></i>
          <span>导师工作簿</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/Tutor/publish">
            <i class="el-icon-edit"></i>撰写学生指导计划
          </el-menu-item>
          <el-menu-item index="/Tutor/manage">
            <i class="el-icon-s-management"></i>学生指导计划管理
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-menu-item index="/Messages">
        <i class="el-icon-chat-square"></i>
        <span slot="title">消息</span>
      </el-menu-item>

      <el-submenu index="6">
        <template slot="title">
          <i class="el-icon-s-tools"></i>
          <span>设置</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/MyConfig/timesLot">
            <i class="el-icon-menu"></i>时段/专家
          </el-menu-item>
          <el-menu-item index="/MyConfig/about">
            <i class="el-icon-s-custom"></i>个人设置
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="7" v-if="!display">
        <template slot="title">
          <i class="el-icon-s-data"></i>
          <span>数据统计</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/Statustucs/ice">
            <i class="el-icon-s-promotion"></i>冰山模型
          </el-menu-item>
          <el-menu-item index="/Statustucs/career">
            <i class="el-icon-s-management"></i>职业规划
          </el-menu-item>
          <el-menu-item index="/Statustucs/resume">
            <i class="el-icon-document"></i>简历统计
          </el-menu-item>
          <el-menu-item index="/Statustucs/employ">
            <i class="el-icon-document-checked"></i>就业统计
          </el-menu-item>
          <el-menu-item index="/Statustucs/school">
            <i class="el-icon-view"></i>校级看板
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-menu-item index="/logout" @click="Logout">
        <i class="el-icon-switch-button"></i>
        <span slot="title">退出</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'NvMenu',
  data() {
    return {
      display: false
    }
  },
  computed: {
    ...mapGetters(['roleid'])
  },
  created() {
    this.display = this.roleid >= 3 ? false : true
  },
  watch: {
    roleid(value) {
      this.display = this.roleid >= 3 ? false : true
    }
  },
  methods: {
    Logout() {
      this.$confirm('是否退出', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.$store.dispatch('SignOut')
          this.$router.push({
            name: 'login'
          })
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss">
.wrap {
  width: 240px;
  z-index: 1100;
  position: fixed;
  height: 100%;
  .el-menu {
    height: 100%;
  }
  .el-menu-item-group__title {
    padding: 0;
  }
}
</style>
